<template>
  <div class="main-class">
    <div class="timeNum">
      <p>
        &nbsp;疫情数据信息更新于
        <span style="font-weight: 500">{{ lastUpdateTime }}</span>
      </p>
    </div>
    <el-row
      v-if="this.chinaDayList.length > 0"
      :gutter="20"
      style="margin-bottom: 11px; text-align: center"
    >
      <el-col :span="4">
        <div class="local" style="background-color: #fffaf7">
          <div class="add">
            较上日
            <span style="color: #e57631"
              >+{{ this.chinaTotal.today.input }}</span
            >
          </div>
          <div class="number" style="color: #e57631">
            {{ this.chinaTotal.total.input }}
          </div>
          <div class="text">
            <span>境外输入</span>
          </div>
        </div>
      </el-col>
      <!-- 类似代码 -->
      <el-col :span="4">
        <div class="local" style="background-color: #fff8f8">
          <div class="add">
            较上日
            <span style="color: #e61c1d"
              >+{{ this.chinaDayList[this.chinaDayList.length - 1].today.confirm }}</span
            >
          </div>
          <div class="number" style="color: #e61c1d">
            {{
              this.chinaDayList[this.chinaDayList.length - 1].total.confirm
            }}
          </div>
          <div class="text">
            <span>现有确诊</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="local" style="background-color: #fff4f4">
          <div class="add">
            较上日
            <span style="color: #be2121"
              >+{{ this.chinaTotal.today.confirm }}</span
            >
          </div>
          <div class="number" style="color: #be2121">
            {{ this.chinaTotal.total.confirm }}
          </div>
          <div class="text">
            <span>累计确诊</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="local" style="background-color: #fef7ff">
          <div class="add">
            较上日
            <span style="color: #ae3ac6"
              >+{{
                this.chinaTotal.extData.incrNoSymptom
                  ? this.chinaTotal.extData.incrNoSymptom
                  : "0"
              }}</span
            >
          </div>
          <div class="number" style="color: #ae3ac6">
            {{ this.chinaTotal.extData.noSymptom }}
          </div>
          <div class="text">
            <span>无症状感染者</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="local" style="background-color: #f1f5ff">
          <div class="add">
            较上日
            <span style="color: #4e8be6"
              >+{{ this.chinaTotal.today.heal }}</span
            >
          </div>
          <div class="number" style="color: #4e8be6">
            {{ this.chinaTotal.total.heal }}
          </div>
          <div class="text">
            <span>累计治愈</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="local" style="background-color: #f3f6f8">
          <div class="add">
            较上日
            <span style="color: #4e5a65"
              >+{{ this.chinaTotal.today.dead }}</span
            >
          </div>
          <div class="number" style="color: #4e5a65">
            {{ this.chinaTotal.total.dead }}
          </div>
          <div class="text">
            <span>累计死亡</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--地图 信息部分-->
    <el-row :gutter="20">
      <el-col :span="10">
        <el-card shadow="hover" :body-style="{ padding: '0', height: '430px' }">
          <div
            style="
              text-align: center;
              margin-top: 15px;
              font-size: 18px;
              font-weight: 600;
            "
          >
            最新疫情新闻
          </div>
          <el-timeline style="margin-top: 10px">
            <el-timeline-item
              v-for="(item, index) in news"
              :key="index"
              :timestamp="timestampToTime(item.eventTime)"
            >
              <a :href="item.eventUrl" target="_blank">{{
                item.eventDescription
              }}</a>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <!-- 地图 -->
      <el-col :span="14">
        <el-card shadow="hover">
          <!-- <ECharts /> -->
          <ECharts v-if="list.length > 0" :list="list" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ECharts from "@/components/Map/ECharts";
import { getCaseNum, getNews } from "@/api/map/index";

export default {
  name: "index",
  components: { ECharts },
  data() {
    return {
      lastUpdateTime: "",
      chinaTotal: {},
      chinaDayList: [],
      list: [],
      news: [],
      querynumparams: {
        name: undefined,
        value: undefined,
      },
    };
  },
  methods: {
    timestampToTime(timestamp) {
      let date = new Date(timestamp * 1000);
      let Y = date.getFullYear() + "年";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日 ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + "时";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        "分";
      return Y + M + D + h + m;
    },
    //获取数据
    getData() {
      getCaseNum(this.quernumyparams).then((res) => {
        //console.log(res);
        let temp = res.data.data.areaTree[2];
        let temp1 = res.data.data;
        this.list = temp.children.map((item) => {
          return {
            name: item.name,
            value: item.today.confirm,
          };
        });
        this.lastUpdateTime = temp1.lastUpdateTime;
        this.chinaTotal = temp1.chinaTotal;
        this.chinaDayList = temp1.chinaDayList;
        //console.log(this.chinaDayList);
      });
    },
    //获取新闻
    getMapNew() {
      getNews().then((res) => {
        //console.log(res);
        this.news = res.data.slice(0, 7);
        //console.log(this.news);
      });
    },
  },
  created() {
    this.getData();
    this.getMapNew();
  },
};
</script>
<style lang="scss">
.el-collapse-item__header {
  font-size: 16px;
  color: rgb(190, 33, 33);
}

.text-item {
  font-size: 17px;
  padding: 10px;
  text-indent: 15px;
}

.el-timeline-item {
  padding-bottom: 17px;
}

.el-timeline {
  font-size: 15px;

  a {
    color: inherit;
    text-decoration: none;
    display: block;
    border: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
  }

  a:hover {
    color: #409eff;
  }

  a:active,
  a:visited,
  a:link,
  a:focus {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: none;
    text-decoration: none;
  }

  ::selection {
    background: #fff;
    color: #333;
  }

  ::-moz-selection {
    background: #fff;
    color: #333;
  }
}

.local {
  border-radius: 5px;
  padding: 18px;
}

.add {
  padding-top: 5px;
  font-size: 18px;
  line-height: 8px;
  font-weight: 400;
  color: #7c7c7c;
}

.number {
  font-size: 30px;
  line-height: 22px;
  font-weight: 700;
  padding-top: 22px;
}

.text {
  font-size: 18px;
  line-height: 13px;
  color: #222;
  font-weight: 500;
  margin-top: 18px;
}

.timeNum {
  color: #737373;
  font-size: 15px;
  padding: 0;
  margin-left: 20px;
  margin-top: 12px;
  line-height: 8px;
  border-radius: 5px;
}

.btn-group {
  float: right;
  margin-top: -30px;
  .el-tag + .el-tag {
    margin-left: 6px;
  }
}
</style>
